delete request endpoint

1 files changed, 47 insertions, 23 deletions

diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index ffefc1be..1672c439 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { enhance } from '$app/forms';
 	import { f, s, post, failure, sat, sats } from '$lib/utils';
 	import { tick } from 'svelte';
 	import { Avatar, Icon } from '$comp';
@@ -90,39 +91,61 @@
 		</a>
 	</div>
 
-	{#each invoices as { amount, currency, rate, user, uuid }}
+  <div>
+	{#each invoices as { request_id, amount, currency, rate, user: recipient, requester, uuid }}
 		<div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
-			<div class="flex">
+			<div class="flex gap-2">
 				<div>
-					<div class="flex">
-						<Avatar {user} size={20} />
-						<div class="my-auto text-left">
-							<p class="ml-1 text-lg break-words">{user.username}</p>
+					{#if user.username === requester.username}
+						<div class="flex">
+							<Avatar user={recipient} size={20} />
+							<div class="my-auto text-left">
+								<p class="text-secondary">Invoice from</p>
+								<p class="ml-1 text-lg break-words">{recipient.username}</p>
+							</div>
 						</div>
-					</div>
-				</div>
-				<div class="whitespace-nowrap my-auto mx-auto flex gap-2">
-					<div class="font-bold">
-						{f(amount * (rate / sats), currency)}
-					</div>
-
-					<div class="text-secondary">{sat(amount)}</div>
+					{:else}
+						<div class="flex">
+							<Avatar user={requester} size={20} />
+							<div class="my-auto text-left">
+								<p class="text-secondary">You invoiced</p>
+								<p class="ml-1 text-lg break-words">{requester.username}</p>
+							</div>
+						</div>
+					{/if}
 				</div>
-				<div class="flex ml-auto my-auto gap-2">
-					<a href={`/invoice/${uuid}/tip`}>
-						<div class="p-2 border rounded-xl bg-white flex">
-							<Icon icon="send" style="w-8 opacity-50 hover:opacity-100" />
+				<div class="ml-auto space-y-2">
+					<div class="w-full flex">
+						<div class="flex ml-auto my-auto gap-2">
+							{#if user.username === requester.username}
+								<a href={`/invoice/${uuid}/tip`}>
+									<div class="p-2 border rounded-xl bg-white flex">
+										<Icon icon="send" style="w-6 opacity-50 hover:opacity-100" />
+									</div>
+								</a>
+							{/if}
+							<form action={`/${user.username}/request?/delete`} method="POST" use:enhance>
+								<input type="hidden" name="request_id" value={request_id} />
+								<div class="p-2 border rounded-xl bg-white flex">
+									<button type="submit">
+										<Icon icon="close" style="w-6 opacity-50 hover:opacity-100" />
+									</button>
+								</div>
+							</form>
 						</div>
-					</a>
-					<form action="/request?/delete" method="POST">
-						<div class="p-2 border rounded-xl bg-white flex">
-							<Icon icon="close" style="w-8 opacity-50 hover:opacity-100" />
+					</div>
+					<div class="whitespace-nowrap my-auto mx-auto flex gap-2">
+						<div class="font-bold">
+							{f(amount * (rate / sats), currency)}
 						</div>
-					</form>
+
+						<div class="text-secondary">{sat(amount)}</div>
+					</div>
 				</div>
 			</div>
 		</div>
 	{/each}
+  </div>
 
 	<div>
 		{#each requests as { id, invoice, memo, requester: r }}
@@ -133,6 +156,7 @@
 							<Avatar user={r} size={20} />
 							<div class="my-auto text-left">
 								<p class="ml-1 text-lg break-words">{r.username}</p>
+								<p class="ml-1 text-secondary">Is ready to pay</p>
 								<p class="ml-1 text-secondary">{memo}</p>
 							</div>
 						</div>